<template>
    <p style="font-size: 20px;font-weight: 400;margin-bottom: 10px;">{{ $t('menu.creationCategory') }}</p>

    <!-- 头部按钮 -->
    <div class="search-box">
        <div class="flex">
            <span style="width: 80px;">{{ $t('common.name') }}</span>
            <el-input v-model="search.searchName" clearable></el-input>
        </div>
        <el-button type="primary" @click="searchChange">{{ $t('data.search') }}</el-button>
        <el-button type="primary" @click="addShow">{{ $t('data.add') }}</el-button>

    </div>

    <!-- 表格 -->

    <el-table :data="datas" stripe border style="height: 580px">
        <el-table-column prop="name" :label="$t('common.name')" align="center" />
        <el-table-column fixed="right" :label="$t('column.operations')" align="center">
            <template #default="scope">

                <el-button type="primary" size="small" @click="editShow(scope.row)">
                    编辑
                </el-button>
                <el-popconfirm title="是否删除?" @confirm="delConfirm(scope.row.id)">
                    <template #reference>
                        <el-button type="danger" size="small">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>


    </el-table>

    <!-- 表单 -->
    <el-dialog v-model="formShow" :title="$t(title)" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="data" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="名称" prop="name">
                <el-input v-model="data.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="canelChange">{{ $t('data.cancel') }}</el-button>
                <el-button type="primary" v-if="type == 'add'" @click="addChange(ruleFormRef)">
                    {{ $t('data.add') }}
                </el-button>
                <el-button type="primary" v-else @click="editChange(ruleFormRef)">
                    {{ $t('data.edit') }}
                </el-button>
            </div>
        </template>
    </el-dialog>


    <el-pagination style="padding-top: 30px;" background layout="total, sizes, prev, pager, next, jumper"
        :total="search.total" :page-sizes="[10, 30, 50, 100]" v-model:current-page="search.index"
        v-model:page-size="search.size" @size-change="pageChange" @current-change="currentChange" />
</template>


<script setup>
import { reactive, ref } from 'vue'
import api from './api'
import { ElMessage } from 'element-plus';

const datas = ref([])
const data = ref()
const formShow = ref(false)
const type = ref('add')
const title = ref('data.add')
const ruleFormRef = ref()
const rules = reactive({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
})

const delConfirm = (id) => {
    api.delCategory(id).then(res => {
        if (res.success) {
            datas.value = datas.value.filter(x => x.id != id)
            ElMessage({ type: 'success', message: res.message })
        }
    })
}

const addChange = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.addCategory(data.value).then(res => {
                let type = 'error'
                if (res.success) {
                    type = 'success'
                    formShow.value = false
                    getCategories()
                }
                ElMessage({
                    type: type,
                    message: res.message
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const editChange = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.updateCategory(data.value).then(res => {
                let type = 'error'
                if (res.success) {
                    type = 'success'
                    formShow.value = false
                    datas.value[datas.value.findIndex(x => x.id == data.value.id)] = JSON.parse(JSON.stringify(data.value))
                }
                ElMessage({
                    type: type,
                    message: res.message
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const editShow = (row) => {
    data.value = JSON.parse(JSON.stringify(row))
    type.value = 'edit'
    title.value = 'data.edit'
    formShow.value = true
}

const addShow = () => {
    data.value = {
        id: 0,
        name: ''
    }
    type.value = 'add'
    title.value = 'data.add'
    formShow.value = true
}
const canelChange = () => {
    formShow.value = false
}
const search = ref({
    total: 0,
    index: 1,
    size: 10,
    searchName: ''
})

const getCategories = () => {
    api.getCategories(search.value).then(res => {
        datas.value = res.datas
        search.value.total = res.total
        console.log(datas.value)
        console.log(search.value.total)
    })
}
getCategories()

const searchChange = () => {
    getCategories()
}

const pageChange = (value) => {
    search.value.size = value
    getCategories()
}

const currentChange = (value) => {
    search.value.index = value
    getCategories()
}
</script>


<style lang="scss">
.search-box {
    .flex {
        display: flex;
        justify-content: space-between;
        width: 180px;
        height: 30px;
        line-height: 30px;
        margin-right: 10px
    }
}
</style>